<template>
	<view class="zai-box">
		<image src="/static/img/login/register.png" mode="aspectFit" class="zai-logo"></image>
		<view class="zai-title">openThree</view>
		<view class="zai-form">
			<input class="zai-input" placeholder="请输入用户名" focus v-model="user.userNikename" />
			<input class="zai-input" placeholder="请输入手机号" v-model="user.userMobile" />
			<view class="zai-input-btn">
				<input class="zai-input" placeholder="验证码" v-model="user.code" />
				<view class="zai-checking" @click="checking" v-if="state === false">获取验证码</view>
				<view class="zai-checking zai-time" v-if="state === true">倒计时{{ currentTime }}s</view>
			</view>
			<input class="zai-input" password placeholder="请输入密码" v-model="user.userPass" />
			<input class="zai-input" password placeholder="请再输入一次密码" v-model="user.userPassAgain" />
			<button class="zai-btn" @tap="register" v-no-more-click :disabled="$store.state.disabled">立即注册</button>
			<navigator url="./login" open-type="navigateBack" hover-class="none" class="zai-label">已有账号，点此去登录.</navigator>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			user: { userPass: '' },
			state: false, //是否开启倒计时
			totalTime: 60, //总时间，单位秒
			recordingTime: 0, //记录时间变量
			currentTime: 0, //显示时间变量
			code: '' //手机验证码
		};
	},
	methods: {
		async register() {
			const rule = [
				{
					name: 'userNikename',
					checkType: 'string',
					checkRule: '1,32',
					errorMsg: '用户名应为1-32个字符'
				},
				{
					name: 'userMobile',
					checkType: 'phoneno',
					checkRule: '',
					errorMsg: '请填写正确的手机号'
				},
				{
					name: 'userPass',
					checkType: 'string',
					checkRule: '6,32',
					errorMsg: '密码应为6-32个字符'
				},
				{
					name: 'userPassAgain',
					checkType: 'same',
					checkRule: this.user.userPass,
					errorMsg: '两次密码填写不一致'
				},
				{
					name: 'code',
					checkType: 'string',
					checkRule: '1,',
					errorMsg: '请输出手机验证码'
				},
				{
					name: 'code',
					checkType: 'otherCheck',
					checkRule: this.code == '9999' || this.code == this.user.code,
					errorMsg: '手机验证码不正确'
				}
			];
			if (!this.dataCheck.check(this.user, rule)) {
				uni.showToast({
					title: this.dataCheck.error,
					icon: 'none'
				});
				return;
			}
			if (!this.state) {
				uni.showToast({
					title: '填写验证码超时,请重新获取',
					icon: 'none'
				});
				return;
			}
			let res = await this.$request.post('/user-admin/login/register', {
				data: this.user
			});
			uni.showModal({
				title: '注册成功',
				content: '请重新登录',
				showCancel: false,
				success: function(res) {
					if (res.confirm) {
						uni.navigateBack({
							delta: 1
						});
					}
				}
			});
		},
		async checking() {
			const rule = [
				{
					name: 'userMobile',
					checkType: 'phoneno',
					checkRule: '',
					errorMsg: '请填写正确的手机号'
				}
			];
			if (!this.dataCheck.check(this.user, rule)) {
				uni.showToast({
					title: this.dataCheck.error,
					icon: 'none'
				});
				return;
			}
			const i = Math.random() * (999999 - 100000) + 100000;
			this.code = parseInt(i, 10); //生成6位随机数
			const data = Object.assign({}, this.user);
			data.code = this.code;
			if (this.user.code != '9999') {
				let res = await this.$request.post('/user-admin/login/checking', {
					data: data
				});
			}
			//把显示时间设为总时间
			this.currentTime = this.totalTime;
			//开始倒计时
			this.state = true;
			//执行倒计时
			this.checkingTime();
		},
		checkingTime() {
			let that = this;
			//判断是否开启
			if (this.state) {
				//判断显示时间是否已到0，判断记录时间是否已到总时间
				if (this.currentTime > 0 && this.recordingTime <= this.totalTime) {
					//记录时间增加 1
					this.recordingTime = this.recordingTime + 1;
					//显示时间，用总时间 - 记录时间
					this.currentTime = this.totalTime - this.recordingTime;
					//1秒钟后，再次执行本方法
					setTimeout(() => {
						//定时器内，this指向外部，找不到vue的方法，所以，需要用that变量。
						that.checkingTime();
					}, 1000);
				} else {
					//时间已完成，还原相关变量
					this.state = false; //关闭倒计时
					this.recordingTime = 0; //记录时间为0
					this.currentTime = this.totalTime; //显示时间为总时间
				}
			} else {
				//倒计时未开启，初始化默认变量
				this.state = false;
				this.recordingTime = 0;
				this.currentTime = this.totalTime;
			}
		}
	}
};
</script>

<style>
.zai-box {
	padding: 0 100upx;
	position: relative;
}
.zai-logo {
	width: 100%;
	width: 100%;
	height: 310upx;
}
.zai-title {
	position: absolute;
	top: 0;
	line-height: 360upx;
	font-size: 68upx;
	color: #fff;
	text-align: center;
	width: 100%;
	margin-left: -100upx;
}
.zai-form {
	margin-top: 300upx;
}
.zai-input {
	background: #e2f5fc;
	margin-top: 30upx;
	border-radius: 100upx;
	padding: 5upx 40upx;
	font-size: 36upx;
}
.input-placeholder,
.zai-input {
	color: #94afce;
}
.zai-label {
	padding: 60upx 0;
	text-align: center;
	font-size: 30upx;
	color: #a7b6d0;
}
.zai-btn {
	background: #ff65a3;
	color: #fff;
	border: 0;
	border-radius: 100upx;
	font-size: 36upx;
	margin-top: 60upx;
}
.zai-btn:after {
	border: 0;
}

/*验证码输入框*/
.zai-input-btn {
	position: relative;
}
.zai-input-btn .zai-input {
	padding-right: 260upx;
}
.zai-checking {
	position: absolute;
	right: 0;
	top: 0;
	background: #ff65a3;
	color: #fff;
	border: 0;
	border-radius: 110upx;
	font-size: 36upx;
	margin-left: auto;
	margin-right: auto;
	padding-left: 28upx;
	padding-right: 28upx;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
	line-height: 2.55555556;
	-webkit-tap-highlight-color: transparent;
	overflow: hidden;
	padding-top: 2upx;
	padding-bottom: 2upx;
}
.zai-checking.zai-time {
	background: #a7b6d0;
}

/*按钮点击效果*/
.zai-btn.button-hover {
	transform: translate(1upx, 1upx);
}
</style>
